<template>
	<div class="banner">
		<div class="lunbo">
			<el-carousel height="400px" trigger="click" arrow="always">
				<el-carousel-item v-for="item in list" :key="item.id">
					<img :src="item.img" />
				</el-carousel-item>
			</el-carousel>
		</div>

		<div class="tab">
			<h3>好评最高5本书</h3>
			<ul>
				<li v-for="item in hotlist" :key="item.id">
					<img :src="`${$Imgurl}/showImg/${item.picture}`">
					<p>{{item.name}}</p>
					<p>
						￥{{item.price}}
						<button @click="buy(item)">购买</button>
					</p>
				</li>
			</ul>
		</div>
		<div class="tab">
			<h3>销量最高5本书</h3>
			<ul>
				<li v-for="item in salselist" :key="item.id">
					<img :src="`${$Imgurl}/showImg/${item.picture}`">
					<p>{{item.name}}</p>
					<p>￥{{item.price}}<button @click="buy(item)">购买</button></p>
				</li>
			</ul>
		</div>
		<div class="tab">
			<h3>意向最高5本书</h3>
			<ul>
				<li v-for="item in wouldlist" :key="item.id">
					<img :src="`${$Imgurl}/showImg/${item.picture}`">
					<p>{{item.name}}</p>
					<p>￥{{item.price}}<button @click="buy(item)">购买</button></p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default {
		name: 'Banner',
		data() {
			return {
				banner: [],
				arrlist: [],
				arrlist2: [],
				arrlist3: [],
				bannerwidth: 0, //轮播图宽度
				CurrentImg: 0, //当前轮播图的索引
				offsetWidth: 0,
				isPlaying: true, //判断是否处于自动轮播
				playTimer: null, //轮播定时器
				list: [{
						id: 1,
						img: 'bannerimg/2.jpg'
					},
					{
						id: 2,
						img: 'bannerimg/3.jpg'
					},
					{
						id: 3,
						img: 'bannerimg/4.jpg'
					},
					{
						id: 4,
						img: 'bannerimg/5.jpg'
					},
					{
						id: 5,
						img: 'bannerimg/6.jpg'
					}
				],
				hotlist: [],
				salselist: [],
				wouldlist: []
			}
		},
		methods: {
			buy(val) {
				let token = localStorage.getItem('token')
				if (token == '') {
					this.$message.warning({
						message: "请登录账号",
						offset: 80
					})
				} else {
					instance.post('/api/public/addCart/' + val.id).then((res) => {
						if (res.data.code == 200) {
							this.$message.success({
								message: "添加购物车成功",
								offset: 80
							})
						}
					}).catch((error) => {
						console.log(error);
					})
				}
			}
		},
		created() {
			this.axios.get('/api/public/book/findFav5').then((res) => {
					let data = res.data.data
					this.hotlist = data
				}).catch((error) => {

				}),
				this.axios.get('/api/public/book/findSale5').then((res) => {
					let data = res.data.data
					this.salselist = data
				}).catch((error) => {

				}),
				this.axios.get('/api/public/book/findRate5').then((res) => {
					let data = res.data.data
					this.wouldlist = data
				}).catch((error) => {

				})
		}
	}
</script>

<style scoped>
	.el-carousel__arrow--left {
		background-color: gold;
		color: red;
	}

	.el-carousel__item img {
		width: 100%;
		border-radius: 10px;
		height: 100%;
	}

	.banner {
		margin-top: 1000px;
		width: 90%;
		margin: auto;
	}

	.ic1 {
		text-align: center;
		color: #FF0000;
		font-size: 25px;
	}

	.ic2 {
		text-align: center;
		color: #D4C40B;
		font-size: 25px;
	}

	i:hover {
		cursor: pointer;
	}

	.tab {
		margin-top: 20px;
		width: 100%;
		float: left;
	}

	.tab h3 {
		font-size: 20px;
		color: red;
		height: 50px;
		border-bottom: 2px solid gold;
	}

	.tab ul {
		width: 100%;
	}

	.tab img {
		width: 200px;
		height: 200px;
	}


	.tab ul li {
		margin-top: 20px;
		width: 20%;
		text-align: center;
		float: left;
	}

	.tab p {
		margin-top: 10px;
	}

	.tab button {
		margin-left: 10px;
	}

	.lunbo {
		width: 95%;
		margin: 20px auto;
		position: relative;
	}

	.lunbo .zuo {
		position: absolute;
		left: 0;
		line-height: 550px;
	}

	.lunbo .you {
		position: absolute;
		right: 0;
		line-height: 550px;
	}

	.lbt {
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}

	.lbt .items_box {
		display: flex;
		height: 550px;
	}

	.lbt .slide {
		flex-shrink: 0;
		width: 100%;
	}

	.lbt .slide img,
	.lbt .slide a {
		width: 100%;
		height: 100%;
	}
</style>
